<template>
<div>
  <el-card shadow="hover">
    <el-form :inline="true" :model="userSearchForm" ref="userSearchForm">
      <el-form-item label="用户姓名" prop="userName">
        <el-autocomplete
          popper-class="my-autocomplete"
          v-model="userSearchForm.userName"
          :fetch-suggestions="userSearchFormUserQuerySearchAsync"
          placeholder="请输入用户姓名"
          @select="userSearchFormUserSelect"
          clearable>
          <template slot-scope="{ item }">
            <div class="name">用户编号：{{ item.code }}</div>
            <span class="code">用户姓名：{{ item.value }}</span>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="用户编号" prop="userCode">
        <el-input v-model="userSearchForm.userCode" placeholder="请输入用户编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="departmentCode">
        <el-cascader
          placeholder="请选择部门"
          :options="commonDepartmentOptions"
          v-model="userSearchForm.departmentCode"
          change-on-select
          clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="userSearchFormSubmit">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="userSearchFormResetFields">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card shadow="hover">
    <el-button-group>
      <el-button type="primary" icon="el-icon-news" size="small" @click="userAddFormDialogVisible = true">新增
      </el-button>
      <el-button type="danger" icon="el-icon-delete" size="small" @click="userSearchPageDeletesClick">删除
      </el-button>
      <a target="_blank" href="/download_import_template/user.xls?action=download">
        <el-button type="info" icon="el-icon-download" size="small">下载excel模板</el-button>
      </a>
      <el-button type="success" icon="el-icon-upload2" size="small">导入excel</el-button>
      <el-button type="warning" icon="el-icon-document" size="small">导出excel</el-button>
    </el-button-group>
  </el-card>
  <el-table v-if="userSearchPage.totalElements > 0"
            :data="userSearchPage.datas"
            border
            @selection-change="userSearchPageSelectionChange"
            style="width: 100%"
            max-height="400">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      fixed
      prop="userCode"
      label="编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="departmentCode"
      label="部门编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="departmentName"
      label="部门名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="userGroups"
      label="用户组"
      width="300">
    </el-table-column>
    <el-table-column
      prop="roles"
      label="角色"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="136">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="userSearchPageViewClick(scope.row)">查看</el-button>
        <el-button type="text" size="small" @click="userSearchPageModifyClick(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="userSearchPageDeleteClick(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-if="userSearchPage.totalElements > 0"
                 @size-change="userSearchFormPaginationSizeChange"
                 @current-change="userSearchFormPaginationCurrentChange"
                 :current-page="userSearchPage.page"
                 :page-sizes="[25, 50, 100, 200]"
                 :page-size="userSearchPage.pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="userSearchPage.totalElements">
  </el-pagination>
  <el-alert v-if="userSearchPage.totalElements < 1 && userSearchPage.page > 0"
            title="未查询到数据"
            type="warning"
            center
            show-icon>
  </el-alert>
  <el-dialog title="用户新增" :visible.sync="userAddFormDialogVisible"
             @closed="userAddFormDialogClosed">
    <el-form :model="userAddForm" :rules="userAddFormRules" ref="userAddForm"
             label-width="120px" style="max-height: 360px; overflow-y: auto;">
      <el-form-item label="用户编号" prop="userCode">
        <el-input v-model="userAddForm.userCode"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="用户姓名" prop="name">
        <el-input v-model="userAddForm.name"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="departmentCode">
        <el-cascader
          placeholder="请选择部门"
          :options="commonDepartmentOptions"
          v-model="userAddForm.departmentCode"
          change-on-select
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label="用户组" prop="userGroupCode">
        <el-cascader
          placeholder="请选择用户组"
          :options="commonUserGroupOptions"
          v-model="userAddForm.userGroupCode"
          @change="userAddFormUserGroupChange"
          change-on-select
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label=" " prop="userGroups" v-if="userAddForm.userGroups.length > 0">
        <el-tag
          :key="userGroup.value"
          v-for="userGroup in userAddForm.userGroups"
          closable
          @close="userAddFormUserGroupHandleClose(userGroup)"
          :disable-transitions="false">
          {{userGroup.label}}
        </el-tag>
      </el-form-item>
      <el-form-item label="角色" prop="roleCode">
        <el-cascader
          placeholder="请选择角色"
          :options="commonRoleOptions"
          v-model="userAddForm.roleCode"
          @change="userAddFormRoleChange"
          change-on-select
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label=" " prop="roles" v-if="userAddForm.roles.length > 0">
        <el-tag
          :key="role.value"
          v-for="role in userAddForm.roles"
          closable
          @close="userAddFormRoleHandleClose(role)"
          :disable-transitions="false">
          {{role.label}}
        </el-tag>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="userAddFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="userAddFormSubmit">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog title="用户编辑" :visible.sync="userModifyFormDialogVisible"
             @closed="userModifyFormDialogClosed">
    <el-form :model="userModifyForm" :rules="userModifyFormRules" ref="userModifyForm"
             label-width="120px" style="max-height: 360px; overflow-y: auto;">
      <el-form-item label="用户编号" prop="userCode">
        <el-input v-model="userModifyForm.userCode"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="用户姓名" prop="name">
        <el-input v-model="userModifyForm.name"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="departmentCode">
        <el-cascader
          placeholder="请选择部门"
          :options="commonDepartmentOptions"
          v-model="userModifyForm.departmentCode"
          change-on-select
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label="用户组" prop="userGroupCode">
        <el-cascader
          placeholder="请选择用户组"
          :options="commonUserGroupOptions"
          v-model="userModifyForm.userGroupCode"
          @change="userModifyFormUserGroupChange"
          change-on-select
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label=" " prop="userGroups" v-if="userModifyForm.userGroups.length > 0">
        <el-tag
          :key="userGroup.value"
          v-for="userGroup in userModifyForm.userGroups"
          closable
          @close="userModifyFormUserGroupHandleClose(userGroup)"
          :disable-transitions="false">
          {{userGroup.label}}
        </el-tag>
      </el-form-item>
      <el-form-item label="角色" prop="roleCode">
        <el-cascader
          placeholder="请选择角色"
          :options="commonRoleOptions"
          v-model="userModifyForm.roleCode"
          @change="userModifyFormRoleChange"
          change-on-select
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label=" " prop="roles" v-if="userModifyForm.roles.length > 0">
        <el-tag
          :key="role.value"
          v-for="role in userModifyForm.roles"
          closable
          @close="userModifyFormRoleHandleClose(role)"
          :disable-transitions="false">
          {{role.label}}
        </el-tag>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="userModifyFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="userModifyFormSubmit">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog title="用户查看" :visible.sync="userViewFormDialogVisible"
             @closed="userViewFormDialogClosed">
    <el-form :model="userViewForm" ref="userViewForm"
             label-width="120px" style="max-height: 360px; overflow-y: auto;">
      <el-form-item label="用户编号" prop="userCode">
        <el-input :value="userViewForm.userCode" readOnly></el-input>
      </el-form-item>
      <el-form-item label="用户姓名" prop="name">
        <el-input :value="userViewForm.name" readOnly></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="departmentCode">
        <el-input :value="userViewForm.departmentName" readOnly></el-input>
      </el-form-item>
      <el-form-item label="用户组" prop="userGroups">
        <el-tag
          :key="userGroup"
          v-for="userGroup in userViewForm.userGroups"
          :disable-transitions="false">
          {{userGroup}}
        </el-tag>
      </el-form-item>
      <el-form-item label="角色" prop="roles">
        <el-tag
          :key="role"
          v-for="role in userViewForm.roles"
          :disable-transitions="false">
          {{role}}
        </el-tag>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="userViewFormDialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style lang="scss">

</style>

<script>
export default {
  data () {
    return {
      commonDepartmentOptions: [],
      commonUserGroupOptions: [],
      commonRoleOptions: [],
      userSearchForm: {
        userName: '',
        userCode: '',
        departmentCode: []
      },
      userSearchPage: {
        datas: [],
        totalElements: 0,
        totalPages: 0,
        hasPrevious: true,
        previous: 1,
        hasNext: true,
        next: 2,
        pages: [
          1,
          2,
          3,
          4,
          5,
          6
        ],
        page: 0,
        pageSize: 25
      },
      userAddFormDialogVisible: false,
      userAddForm: {
        userCode: '',
        name: '',
        departmentCode: [],
        userGroupCode: [],
        userGroups: [],
        roleCode: [],
        roles: []
      },
      userAddFormRules: {
        userCode: [
          {required: true, message: `请输入用户编号`, trigger: 'blur'}
        ],
        name: [
          {required: true, message: `请输入用户姓名`, trigger: 'blur'}
        ],
        departmentCode: [
          {required: true, message: `请选择部门`, trigger: 'blur'}
        ]
      },
      userModifyFormDialogVisible: false,
      userModifyForm: {
        userCode: '',
        name: '',
        departmentCode: [],
        userGroupCode: [],
        userGroups: [],
        roleCode: [],
        roles: []
      },
      userModifyFormRules: {
        userCode: [
          {required: true, message: `请输入用户编号`, trigger: 'blur'}
        ],
        name: [
          {required: true, message: `请输入用户姓名`, trigger: 'blur'}
        ],
        departmentCode: [
          {required: true, message: `请选择部门`, trigger: 'blur'}
        ]
      },
      userViewFormDialogVisible: false,
      userViewForm: {
        userCode: '',
        name: '',
        departmentName: '',
        userGroups: [],
        roles: []
      }
    }
  },
  created () {
    this.$http({
      url: '/cardone/v1/usercenter/department/r0003.json',
      method: 'post'
    }).then(response => {
      this.commonDepartmentOptions = response.data
    })

    this.$http({
      url: '/cardone/v1/authority/userGroup/r0003.json',
      method: 'post'
    }).then(response => {
      this.commonUserGroupOptions = response.data
    })

    this.$http({
      url: '/cardone/v1/authority/role/r0003.json',
      method: 'post'
    }).then(response => {
      this.commonRoleOptions = response.data
    })
  },
  methods: {
    getCascaderObj (val, options) {
      return val.map(function (value, index, array) {
        for (let option of options) {
          if (option.value === value) {
            options = option.children

            return {
              value: option.value,
              label: option.label
            }
          }
        }

        return null
      })
    },
    userSearchFormSubmit () {
      this.$http({
        url: '/cardone/v1/usercenter/user/r0001.json',
        method: 'post',
        data: this.userSearchForm
      }).then(response => {
        this.userSearchPage = response.data
      })
    },
    userSearchFormResetFields () {
      this.$refs.userSearchForm.resetFields()
    },
    userSearchFormPaginationSizeChange (size) {
      this.userSearchForm.pageSize = size

      this.userSearchFormSubmit()
    },
    userSearchFormPaginationCurrentChange (page) {
      this.userSearchForm.pageNumber = page

      this.userSearchFormSubmit()
    },
    userSearchFormUserSelect (item) {
      this.userSearchForm.userCode = item.code
    },
    userSearchFormUserQuerySearchAsync (queryString, cb) {
      this.$http({
        url: '/cardone/v1/usercenter/user/r0002.json',
        method: 'post',
        data: {term: queryString}
      }).then(response => {
        cb(response.data)
      })
    },
    userSearchPageSelectionChange (val) {
      this.userSearchPageSelection = val
    },
    userSearchPageViewClick (row) {
      this.$http({
        url: '/cardone/v1/usercenter/user/view.json',
        method: 'post',
        data: {userId: row.userId}
      }).then(response => {
        this.userViewForm = response.data

        this.userViewFormDialogVisible = true
      })
    },
    userSearchPageModifyClick (row) {
      this.$http({
        url: '/cardone/v1/usercenter/user/modify.json',
        method: 'post',
        data: {userId: row.userId}
      }).then(response => {
        this.userModifyForm = response.data

        this.userModifyFormDialogVisible = true
      })
    },
    userSearchPageDeleteClick (row) {
      this.$confirm('将删除用户数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: '/cardone/v1/usercenter/user/d0001.json',
          method: 'post',
          data: {userIds: row.userId}
        }).then(response => {
          this.$message({
            type: 'info',
            message: '删除用户数据成功'
          })

          this.userSearchFormSubmit()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除用户数据'
        })
      })
    },
    userSearchPageDeletesClick () {
      if (!this.userSearchPageSelection || this.userSearchPageSelection.length < 1) {
        this.$message({
          type: 'warning',
          message: '未勾选用户数据'
        })

        return
      }

      this.$confirm('将删除用户数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let userIds = this.userSearchPageSelection.map(function (row, index, array) {
          return row.userId
        }).join(',')

        this.$http({
          url: '/cardone/v1/usercenter/user/d0001.json',
          method: 'post',
          data: {userIds: userIds}
        }).then(response => {
          this.$message({
            type: 'info',
            message: '删除用户数据成功'
          })

          this.userSearchFormSubmit()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除用户数据'
        })
      })
    },
    userAddFormUserGroupChange (val) {
      for (let userGroup of this.userAddForm.userGroups) {
        if (userGroup.value === val[val.length - 1]) {
          return
        }
      }

      let userGroups = this.getCascaderObj(val, this.commonUserGroupOptions)

      if (!userGroups) {
        return
      }

      this.userAddForm.userGroups.push(userGroups[userGroups.length - 1])
    },
    userAddFormUserGroupHandleClose (userGroup) {
      this.userAddForm.userGroups.splice(this.userAddForm.userGroups.indexOf(userGroup), 1)
    },
    userAddFormRoleChange (val) {
      for (let role of this.userAddForm.roles) {
        if (role.value === val[val.length - 1]) {
          return
        }
      }

      let roles = this.getCascaderObj(val, this.commonRoleOptions)

      if (!roles) {
        return
      }

      this.userAddForm.roles.push(roles[roles.length - 1])
    },
    userAddFormRoleHandleClose (role) {
      this.userAddForm.roles.splice(this.userAddForm.roles.indexOf(role), 1)
    },
    userAddFormDialogClosed () {
      this.$refs.userAddForm.resetFields()
    },
    userAddFormSubmit () {
      this.$refs.userAddForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.$http({
          url: '/cardone/v1/usercenter/user/c0001.json',
          method: 'post',
          data: this.userAddForm
        }).then(response => {
          this.$message({
            type: 'info',
            message: '用户新增成功'
          })

          this.userAddFormDialogVisible = false
        })
      })
    },
    userViewFormDialogClosed () {
      this.$refs.userViewForm.resetFields()
    },
    userModifyFormUserGroupChange (val) {
      for (let userGroup of this.userModifyForm.userGroups) {
        if (userGroup.value === val[val.length - 1]) {
          return
        }
      }

      let userGroups = this.getCascaderObj(val, this.commonUserGroupOptions)

      if (!userGroups) {
        return
      }

      this.userModifyForm.userGroups.push(userGroups[userGroups.length - 1])
    },
    userModifyFormUserGroupHandleClose (userGroup) {
      this.userModifyForm.userGroups.splice(this.userModifyForm.userGroups.indexOf(userGroup), 1)
    },
    userModifyFormRoleChange (val) {
      for (let role of this.userModifyForm.roles) {
        if (role.value === val[val.length - 1]) {
          return
        }
      }

      let roles = this.getCascaderObj(val, this.commonRoleOptions)

      if (!roles) {
        return
      }

      this.userModifyForm.roles.push(roles[roles.length - 1])
    },
    userModifyFormRoleHandleClose (role) {
      this.userModifyForm.roles.splice(this.userModifyForm.roles.indexOf(role), 1)
    },
    userModifyFormDialogClosed () {
      this.$refs.userModifyForm.resetFields()
    },
    userModifyFormSubmit () {
      this.$refs.userModifyForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.$http({
          url: '/cardone/v1/usercenter/user/c0001.json',
          method: 'post',
          data: this.userModifyForm
        }).then(response => {
          this.$message({
            type: 'info',
            message: '用户修改成功'
          })

          this.userModifyFormDialogVisible = false
        })
      })
    }
  }
}
</script>
